<template>
    <div class="x3">
        <el-container style="height: 100%; margin: 0;padding: 0;">
            <el-header class="tou1">
                <div style="display: flex;">
                    <i :class="this.$router.options.routes[3].children[2].meta.icon" style="align-self: center;"></i>
                    <p>{{ this.$router.options.routes[3].children[2].meta.name }}</p>
                </div>
            </el-header>
            <el-main class="shen1">
                <div style="display: flex;">
                    <div>
                        <template>
                            <el-button type="button" style="width: 100px ;height: 35px;" @click="add">点击打开 </el-button>
                        </template>
                    </div>
                    <div style="display: flex; justify-content: flex-end;margin-left:20px">
                        <el-input v-model="params.name" placeholder="请输入内容"></el-input>
                        <el-button type="primary" icon="el-icon-search" @click="sous">搜索</el-button>
                    </div>
                </div>
                <div>
                    <template>
                        <el-table :data="zhuanye" style="width: 100% ,">
                            <el-table-column prop="departmentName" label="系名" width="180">
                            </el-table-column>
                            <el-table-column prop="id" label="ID" width="180">
                            </el-table-column>
                            <el-table-column prop="name" label="专业名">
                            </el-table-column>


                            <el-table-column prop="" label="操作">
                                <template slot-scope="scope">
                                    <el-button  type="danger"size="small" @click="shan(scope.row.id)">删除</el-button>
                                    <el-button type="success" size="small" @click='edit(scope.row.id)'>编辑</el-button>
                                </template>
                            </el-table-column>

                        </el-table>
                    </template>
                </div>
            </el-main>
            <el-footer class="jiao1">
                <div class="block">
                    <span class="demonstration"></span>
                    <el-pagination :current-page.sync="page" @current-change="currentChange" layout="prev, pager, next"
                        :total="yeshu">
                    </el-pagination>
                </div>
            </el-footer>
        </el-container>
        <el-dialog title="专业添加" :visible.sync="dialogFormVisible">
            <el-form :model="form" label-width="100px" ref="form">
                <el-form-item label="专业名" prop="name" :rules="[{ required: true, message: '请输入专业名', trigger: 'blur' }]">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="系" prop="departmentId"
                    :rules="[{ required: true, message: '请选择系', trigger: 'blur' }]">
                    <el-select v-model="form.departmentId" placeholder="请选择系">
                        <el-option v-for="item in xishujusj" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="zhuanyijia1">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>
<script>
import { zhuanyi, zhuanyi2, zhuanyijia, xiname, zhuanyixq, zhuanyixg ,shan3} from '@/api/index'
export default {
    data() {
        return {
            input: '',
            zhuanye: [

            ],
            params: {
                name: "",
                departmentName: ''
            },
            page: 1,
            yeshu: 1,
            form: {
                departmentId: '',
                id: -1,
                name: ''
            },
            dialogFormVisible: false,
            xishujusj: []
        }
    },

    methods: {
        edit(id) {
            console.log(id);
            zhuanyixq(id).then(res => {
                console.log(res);
                if (res.code === 0) {
                    this.form = res.data;
                    this.dialogFormVisible = true
                }

            })
        },
        zhuanyijia1() {
            this.$refs['form'].validate(f => {
                console.log(f);
                console.log("调用接口", this.form);
                if (this.form.id===-1) {
                    zhuanyijia(this.form).then(res => {
                        console.log(res);
                        if (res.code === 0) {
                            this.$message({
                                message: "添加成功",
                                type: "success"
                            })
                            this.zhuanye1()
                            this.dialogFormVisible = false
                        }
                    })
                } else {
                    zhuanyixg(this.form).then(res => {
                        if (res.code === 0) {
                            this.$message({
                                message: "编辑成功",
                                type: "success"
                            })
                            this.zhuanye1()
                            this.dialogFormVisible = false
                        }
                    })
                }


            })
        },
        add() {
            this.dialogFormVisible = true
        },
        xishujud() {
            xiname().then(res => {
                console.log(res);
                this.xishujusj = res.data
            })


        },
        zhuanye1(page = 1) {

            zhuanyi(this.params, this.page).then(res => {

                console.log(res.data);

                if (res.code === 0) {

                    this.zhuanye = res.data;

                }

            });

        }, zhuany() {
            zhuanyi2(this.params).then(res => {
                console.log(res, 'ye');

                if (res.code === 0) {
                    this.yeshu = res.data * 10
                    console.log(res.data * 10);

                }
            })
        },
        currentChange(page) {

            console.log(page);

            this.page = page;
            this.zhuanye1(this.page)
            console.log(1);


        },
        sous() {
            this.page = 1,
                this.zhuany(),
                this.zhuanye1()
        },
        shan(id) {

shan3(id).then(res => {

    if (res.code === 0) {

        // 假设返回 code 为 0 表示删除成功

        this.$message({

            message: "删除成功",

            type: "success"

        });

        // 刷新数据列表

        this.zhuanye1();

    } else {

        // 处理删除失败的情况

        console.error("删除失败", res);

    }

}).catch(error => {

    console.error("请求失败", error);

});

}
    },
    mounted() {
        this.xishujud()


        this.zhuanye1();

        this.sous();

        this.currentChange(1);  // 传递初始页码1

        this.zhuany();

    }
}
</script>
<style lang="scss">
html,
body,
.x3 {

    height: 100%;

    margin: 0;

    padding: 0;

}

.el-header,
.el-main,
.el-footer {
    width: 100%;
    margin: 0;

    padding: 0; // 如果你想完全移除内边距，可以这样设置

    // 如果只是想要调整内边距，可以指定具体的值，例如：

    // padding: 10px;

}

.block {
    justify-items: center;
}
</style>